<template>
	<view>
		<view class="content">
			<view class="">
				<image src="../../static/image/weixinfenxiang.png" mode=""></image>
			</view>
			<view v-if="wxName != null" class="renzheng">
				微信账号：{{wxName}}
			</view>
			<view class="" style="display: flex;flex-direction: row;justify-content: center;padding-top: 40rpx;">
				<view v-if="wxName == null" class="wanshan" @tap="submit()">
					去绑定
				</view>
				<view v-else class="wanshan" @tap="jiechu()">
					解除绑定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import submitButtom from "@/components/submit-button/submit-button.vue"
	export default {
		components:{
			submitButtom
		},
		data() {
			return {
				uid:uni.getStorageSync("token"),
				wxName:null
			}
		},
		onLoad:function(paramed){
			var that = this;
			var userInfo = uni.getStorageSync("userInfo");
			if(userInfo.wx_name!=undefined && userInfo.wx_name != null && userInfo.wx_name != ''){
				that.wxName = userInfo.wx_name;
			}
		},
		methods: {
			jiechu:function(){
				var that = this;
				that.$util.nuiAjax(that.$jiekou.updateUser,{id:that.uid,wxName:"",openId:""},function(res){
					if(res.result == 'true'){
						that.wxName = null;
						var userInfo = uni.getStorageSync("userInfo");
						userInfo.wx_name = "";
						userInfo.wx_open_id = "";
						uni.setStorageSync("userInfo",userInfo);
						uni.$emit('wxBing',{wxName:"去绑定"});
					}
					
				});
			},
			submit:function(){
				var that = this;
				uni.login({
					provider: 'weixin',
					success: (res) => {
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {
								/**
								 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
								 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
								 */
								console.log('用户昵称为：' +infoRes.userInfo.nickName);
								 var openId = infoRes.userInfo.openId;
								 that.$util.nuiAjax(that.$jiekou.updateUser,{id:that.uid,wxName:infoRes.userInfo.nickName,openId:infoRes.userInfo.openId},function(res){
								 	if(res.result == 'true'){
										that.wxName = infoRes.userInfo.nickName;
										var userInfo = uni.getStorageSync("userInfo");
										userInfo.wx_name = infoRes.userInfo.nickName;
										userInfo.wx_open_id = infoRes.userInfo.openId;
										uni.setStorageSync("userInfo",userInfo);
										uni.$emit('wxBing',{wxName:infoRes.userInfo.nickName})
									}
								 	
								 });
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '登陆失败'
								});
							}
						});
					},
					fail: (err) => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
				
				 // uni.login({
				 //   provider: 'weixin',
				 //   success: function (loginRes) {
				 //     console.log(loginRes.authResult);
					//  uni.showToast({
					//      title: '标题',
					//      duration: 2000
					//  });
				 //     // 获取用户信息
				 //     uni.getUserInfo({
				 //       provider: 'weixin',
				 //       success: function (infoRes) {
				 //         console.log('用户昵称为：' + infoRes.userInfo.nickName);
					// 	 uni.showToast({
					// 	     title: '标题',
					// 	     duration: 2000
					// 	 });
				 //       }
				 //     });
				 //   }
				 // });
			}
		}
	}
</script>

<style lang="scss">
	.wanshan{
		// height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(255,149,0,1);
		line-height:40rpx;
		padding: 18rpx 44rpx;
		border-radius:48rpx;
		border:2rpx solid rgba(255,149,0,1);
	}
	page{
		background-color: $page-bg-color;
	}
	.content{
		margin: 20rpx 30rpx 0 30rpx;
		background:rgba(255,255,255,1);
		box-shadow:0px 8rpx 16rpx 0px rgba(246,247,248,1);
		padding: 60rpx 0;
		text-align: center;
	}
	.xinxi{
		// height:34rpx;
		font-size:24rpx;
		font-weight:400;
		color:rgba(34,34,34,1);
		line-height:34rpx;
	}
	.renzheng{
		height:44rpx;
		font-size:32rpx;
		font-weight:400;
		color:rgba(34,34,34,1);
		line-height:44rpx;
		padding: 24rpx 0 24rpx 0;
	}
	.content image{
		width: 80rpx;
		height: 80rpx;
	}
</style>
